import React, { Component } from 'react';
import { Table, Button, Menu, Icon, Pagination, Dialog } from '@icedesign/base';
import IceLabel from '@icedesign/label';
import IceContainer from '@icedesign/container';
import { hashHistory } from 'react-router';
import { CompanyService } from '../../../../services'

export default class CompanyTable extends Component {
  static displayName = 'CompanyTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);

    this.state = {
      pageIndex : 1,
      pageSize : 10
    };
  }

  componentDidMount = () =>{ this.loadData(this.state.pageIndex) }

  loadData = async(page) =>{
    this.setState({loading : true})
    let data = await CompanyService.getPage(page, this.state.pageSize)
    this.setState({
      pageIndex : data.pageIndex,
      pageSize : data.pageSize,
      total : data.total,
      dataSource : data.datas,
      loading : false
    })
  }

  changePage = (page) =>{ this.loadData(page) }

  edit = (record) => {
    hashHistory.push({
      pathname:`/company/edit/${record.id}`,
      state : record,
    })
  }

  verify = (record) =>{
    Dialog.confirm({
      content: "是否审核通过?",
      title: "提示",
      onOk: async() => {
        await CompanyService.verify(record);
        this.loadData(this.state.pageIndex)
      }
    });
  }

  deleteItem = (record) => {
    Dialog.confirm({
      content: "是否确认删除此公司?",
      title: "提示",
      onOk: async() => {
        await CompanyService.del(record)
        this.loadData(this.state.pageIndex)
      }
    });
  };

  renderOperator = (value, index, record) => {
    return (
      <Button.Split type="primary" shape="ghost" shape="warning" menu={(
        <Menu>
          <Menu.Item onClick={this.edit.bind(this, record)}>编辑</Menu.Item>
          { 
            record.verify ?
            <Menu.Item disabled onClick={this.verify.bind(this, record)}>审核</Menu.Item>
            :
            <Menu.Item onClick={this.verify.bind(this, record)}>审核</Menu.Item>
          }
          <Menu.Divider key="3"/>
          <Menu.Item onClick={this.deleteItem.bind(this, record)}>删除</Menu.Item>
      </Menu>
      )}>操作</Button.Split>
    );
  };

  renderVerifyStatus = (value, index, record) => {
    if(record.verify){
      return ( <IceLabel status="success">已审核</IceLabel> )
    }else{
      return ( <IceLabel status="danger">未审核</IceLabel> )
    }
  }

  renderStatus = (value, index, record) => {
    if(record.disable){
      return ( <IceLabel status="default">禁用</IceLabel> )
    }else{
      return ( <IceLabel status="success">启用</IceLabel> )
    }
  }

  render() {
    return (
      <div className="selectable-table" style={styles.selectableTable}>
        <IceContainer>
          <Table dataSource={this.state.dataSource} isLoading={this.state.loading} >
            <Table.Column title="企业名称" dataIndex="companyName" width={100} />
            <Table.Column title="企业法人" dataIndex="corporateEntityName" width={100} />
            <Table.Column title="联系电话" dataIndex="phone" width={100} />
            <Table.Column title="邮箱" dataIndex="email" width={100} />
            <Table.Column title="公司地址" dataIndex="address" width={200} />
            <Table.Column title="创建时间" dataIndex="createDate" width={200} />
            <Table.Column title="审核" cell={this.renderVerifyStatus} align="center" width={100} />
            <Table.Column title="审核人" dataIndex="verifyBy" width={100} />
            <Table.Column title="状态" cell={this.renderStatus} align="center" width={100} />
            <Table.Column title="说明" dataIndex="memo" width={300} />
            <Table.Column title="操作" cell={this.renderOperator} align="center" width={150} />
          </Table>
          <div style={styles.pagination}>
            <Pagination onChange={this.changePage} current={this.state.pageIndex} total={this.state.total} pageSize={this.state.pageSize}/>
          </div>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  batchBtn: {
    marginRight: '10px',
  },
  IceContainer: {
    marginBottom: '20px',
    minHeight: 'auto',
    display: 'flex',
    justifyContent: 'space-between',
  },
  removeBtn: {
    marginLeft: 10,
  },
  pagination: {
    textAlign: 'right',
    paddingTop: '26px',
  },
};
